<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation
	<a class="m-link" href="https://material.angular.io/components/table/examples" target="_blank">demos & documentation</a>
</m-notice>


<m-material-preview [viewItem]="exampleBasic">
	<div class="m-section">
		<p class="m-section__sub">
			The
			<mark>mat-table</mark> provides a Material Design styled data-table that can be used to display rows of data.
		</p>
		<p>
			This table builds on the foundation of the CDK data-table and uses a similar interface for its data input and template, except
			that its element and attribute selectors will be prefixed with
			<mark>mat-</mark> instead of
			<mark>cdk-</mark>. For more information on the interface and a detailed look at how the table is implemented, see the
			<a href="https://material.angular.io/cdk/table/overview" target="_blank">guide covering the CDK data-table</a>.
		</p>
		<div class="m-separator m-separator--dashed"></div>
		<div class="m-section__content">
			<div class="example-container mat-elevation-z8">
				<mat-table #table1 [dataSource]="dataSource1">
					<!--- Note that these columns can be defined in any order.
										The actual rendered columns are set as a property on the row definition" -->

					<!-- Position Column -->
					<ng-container matColumnDef="position">
						<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
						<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
					</ng-container>

					<!-- Name Column -->
					<ng-container matColumnDef="name">
						<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
						<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
					</ng-container>

					<!-- Weight Column -->
					<ng-container matColumnDef="weight">
						<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
						<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
					</ng-container>

					<!-- Symbol Column -->
					<ng-container matColumnDef="symbol">
						<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
						<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
					</ng-container>

					<mat-header-row *matHeaderRowDef="displayedColumns1"></mat-header-row>
					<mat-row *matRowDef="let row; columns: displayedColumns1;"></mat-row>
				</mat-table>
			</div>
		</div>
	</div>
</m-material-preview>

<m-material-preview [viewItem]="examplePagination">
	<div class="m-section">
		<div class="m-section__content">
			<div class="example-container mat-elevation-z8">
				<mat-table #table2 [dataSource]="dataSource2">
					<!-- Position Column -->
					<ng-container matColumnDef="position">
						<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
						<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
					</ng-container>
					<!-- Name Column -->
					<ng-container matColumnDef="name">
						<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
						<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
					</ng-container>
					<!-- Weight Column -->
					<ng-container matColumnDef="weight">
						<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
						<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
					</ng-container>
					<!-- Symbol Column -->
					<ng-container matColumnDef="symbol">
						<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
						<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
					</ng-container>
					<mat-header-row *matHeaderRowDef="displayedColumns2"></mat-header-row>
					<mat-row *matRowDef="let row; columns: displayedColumns2;"></mat-row>
				</mat-table>
				<mat-paginator #matPaginator2 [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true">
				</mat-paginator>
			</div>
		</div>
	</div>
</m-material-preview>

<m-material-preview [viewItem]="exampleSorting">
	<div class="m-section">
		<div class="m-section__content">
			<div class="example-container mat-elevation-z8">
				<mat-table #table3 [dataSource]="dataSource3" #sort3="matSort" matSort>
					<!-- Position Column -->
					<ng-container matColumnDef="position">
						<mat-header-cell *matHeaderCellDef mat-sort-header> No. </mat-header-cell>
						<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
					</ng-container>
					<!-- Name Column -->
					<ng-container matColumnDef="name">
						<mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
						<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
					</ng-container>
					<!-- Weight Column -->
					<ng-container matColumnDef="weight">
						<mat-header-cell *matHeaderCellDef mat-sort-header> Weight </mat-header-cell>
						<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
					</ng-container>
					<!-- Symbol Column -->
					<ng-container matColumnDef="symbol">
						<mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </mat-header-cell>
						<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
					</ng-container>
					<mat-header-row *matHeaderRowDef="displayedColumns3"></mat-header-row>
					<mat-row *matRowDef="let row; columns: displayedColumns3;"></mat-row>
				</mat-table>
			</div>
		</div>
	</div>
</m-material-preview>

<m-material-preview [viewItem]="exampleFiltering">
	<div class="m-section">
		<div class="m-section__content">
			<div class="example-container mat-elevation-z8">
				<div class="example-header">
					<mat-form-field class="mat-form-field">
						<input matInput (keyup)="applyFilter4($event.target.value)" placeholder="Filter">
					</mat-form-field>
				</div>
				<mat-table #table4 [dataSource]="dataSource4">
					<!-- Position Column -->
					<ng-container matColumnDef="position">
						<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
						<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
					</ng-container>
					<!-- Name Column -->
					<ng-container matColumnDef="name">
						<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
						<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
					</ng-container>
					<!-- Weight Column -->
					<ng-container matColumnDef="weight">
						<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
						<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
					</ng-container>
					<!-- Symbol Column -->
					<ng-container matColumnDef="symbol">
						<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
						<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
					</ng-container>
					<mat-header-row *matHeaderRowDef="displayedColumns4"></mat-header-row>
					<mat-row *matRowDef="let row; columns: displayedColumns4;"></mat-row>
				</mat-table>
			</div>
		</div>
	</div>
</m-material-preview>

<m-material-preview [viewItem]="exampleSelection">
	<div class="m-section">
		<div class="m-section__content">
			<div class="example-container mat-elevation-z8">
				<mat-table #table5 [dataSource]="dataSource5">
					<!-- Checkbox Column -->
					<ng-container matColumnDef="select">
						<mat-header-cell *matHeaderCellDef>
							<mat-checkbox (change)="$event ? masterToggle5() : null" [checked]="selection.hasValue() && isAllSelected5()" [indeterminate]="selection.hasValue() && !isAllSelected5()">
							</mat-checkbox>
						</mat-header-cell>
						<mat-cell *matCellDef="let row">
							<mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
							</mat-checkbox>
						</mat-cell>
					</ng-container>
					<!-- Position Column -->
					<ng-container matColumnDef="position">
						<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
						<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
					</ng-container>
					<!-- Name Column -->
					<ng-container matColumnDef="name">
						<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
						<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
					</ng-container>
					<!-- Weight Column -->
					<ng-container matColumnDef="weight">
						<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
						<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
					</ng-container>
					<!-- Symbol Column -->
					<ng-container matColumnDef="symbol">
						<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
						<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
					</ng-container>
					<mat-header-row *matHeaderRowDef="displayedColumns5"></mat-header-row>
					<mat-row *matRowDef="let row; columns: displayedColumns5;" (click)="selection.toggle(row)"></mat-row>
				</mat-table>
			</div>
		</div>
	</div>
</m-material-preview>

<m-material-preview [viewItem]="exampleHTTP">
	<div class="m-section">
		<div class="example-container mat-elevation-z8">
			<div class="example-loading-shade" *ngIf="isLoadingResults || isRateLimitReached">
				<mat-spinner *ngIf="isLoadingResults"></mat-spinner>
				<div class="example-rate-limit-reached" *ngIf="isRateLimitReached">
					GitHub's API rate limit has been reached. It will be reset in one minute.
				</div>
			</div>

			<mat-table #sort6="matSort" #table6 [dataSource]="dataSource6" class="example-table" matSort matSortActive="created" matSortDisableClear
			 matSortDirection="asc">
				<!--- Note that these columns can be defined in any order.
		                                The actual rendered columns are set as a property on the row definition" -->
				<!-- Number Column -->
				<ng-container matColumnDef="number">
					<mat-header-cell *matHeaderCellDef>#</mat-header-cell>
					<mat-cell *matCellDef="let row">{{ row.number }}</mat-cell>
				</ng-container>
				<!-- Title Column -->
				<ng-container matColumnDef="title">
					<mat-header-cell *matHeaderCellDef>Title</mat-header-cell>
					<mat-cell *matCellDef="let row">{{ row.title }}</mat-cell>
				</ng-container>
				<!-- State Column -->
				<ng-container matColumnDef="state">
					<mat-header-cell *matHeaderCellDef>State</mat-header-cell>
					<mat-cell *matCellDef="let row">{{ row.state }}</mat-cell>
				</ng-container>
				<!-- Created Column -->
				<ng-container matColumnDef="created">
					<mat-header-cell *matHeaderCellDef mat-sort-header disableClear="true">
						Created
					</mat-header-cell>
					<mat-cell *matCellDef="let row">{{ row.created_at | date }}</mat-cell>
				</ng-container>
				<mat-header-row *matHeaderRowDef="displayedColumns6"></mat-header-row>
				<mat-row *matRowDef="let row; columns: displayedColumns6;"></mat-row>
			</mat-table>
			<mat-paginator #matPaginator6 [length]="resultsLength" [pageSize]="30"></mat-paginator>
		</div>
	</div>
</m-material-preview>

<m-material-preview [viewItem]="exampleMain">
	<div class="m-section">
		<div class="example-header">
			<mat-form-field>
				<input matInput (keyup)="applyFilter7($event.target.value)" placeholder="Filter">
			</mat-form-field>
		</div>
		<div class="example-container mat-elevation-z8">
			<mat-table #sort7="matSort" [dataSource]="dataSource7" matSort>
				<!-- ID Column -->
				<ng-container matColumnDef="id">
					<mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
					<mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
				</ng-container>
				<!-- Progress Column -->
				<ng-container matColumnDef="progress">
					<mat-header-cell *matHeaderCellDef mat-sort-header> Progress </mat-header-cell>
					<mat-cell *matCellDef="let row"> {{row.progress}}% </mat-cell>
				</ng-container>
				<!-- Name Column -->
				<ng-container matColumnDef="name">
					<mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
					<mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
				</ng-container>
				<!-- Color Column -->
				<ng-container matColumnDef="color">
					<mat-header-cell *matHeaderCellDef mat-sort-header> Color </mat-header-cell>
					<mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}} </mat-cell>
				</ng-container>
				<mat-header-row *matHeaderRowDef="displayedColumns7"></mat-header-row>
				<mat-row *matRowDef="let row; columns: displayedColumns7;"></mat-row>
			</mat-table>
			<mat-paginator #matPaginator7 [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
		</div>
	</div>
</m-material-preview>